<template>
    <div>
        <!------用户管理查询按钮------>
<!--
        <div class="search">
            <el-input v-model="name" placeholder="请输入姓名" suffix-icon="el-icon-search" style="width: 220px;"
                      @keyup.enter.native="loadPost">
            </el-input>

            <el-button type="primary" style="margin-left: 10px;" @click="loadPost">查询</el-button>
            <el-button type="warning" @click="resetParam">重置</el-button>
        </div>
-->

        <!------信息展示列表------>
        <el-table :data="tableData"
                  :header-cell-style="{color:'#c71111'}">
<!--            <el-table-column prop="id" label="ID" width="50">
            </el-table-column>-->
            <el-table-column type="index" label="序号" width="50">
            </el-table-column>

            <el-table-column prop="studentId" label="学号" width="180" sortable>
            </el-table-column>

            <el-table-column prop="name" label="姓名" width="180">
            </el-table-column>

            <el-table-column prop="original" label="原组织" width="250" :formatter="formatOriginal">
            </el-table-column>

            <el-table-column prop="transfer" label="转入组织" width="250" :formatter="formatOrganizations">
            </el-table-column>

            <el-table-column prop="statu" label="状态">
                <template slot-scope="scope">
                    <el-tag
                            :type="scope.row.statu == 1 ? 'primary' : scope.row.statu == 2 ? 'success' : 'danger'"
                            disable-transitions>{{scope.row.statu == 1 ? '待转接' : scope.row.statu == 2 ? '已转接' :
                        '已拒绝'}}
                    </el-tag>
                </template>
            </el-table-column>

        </el-table>


        <!------分页查询------>
        <el-pagination
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                :current-page="pageNum"
                :page-sizes="[5, 9, 20, 30]"
                :page-size="pageSize"
                layout="total, sizes, prev, pager, next, jumper"
                :total="total">
        </el-pagination>


        <!------新增列表------>
        <el-dialog
                title="提示"
                :visible.sync="centerDialogVisible"
                width="30%"
                center>

            <el-dialog
                    width="60%"
                    title="用户选择"
                    :visible.sync="innerVisible"
                    append-to-body>
                <SelectUser @doSelectUser="doSelectUser"></SelectUser>
                <span slot="footer" class="dialog-footer">
                    <el-button @click="innerVisible = false">取 消</el-button>
                    <el-button type="primary" @click="confirmUser">确 定</el-button>
                  </span>
            </el-dialog>

            <el-form ref="form" :rules="rules" :model="form" label-width="80px">
                <el-form-item label="姓名" prop="name">
                    <el-col :span="20">
                        <el-input v-model="form.name" readonly @click.native="selectUser"></el-input>
                    </el-col>
                </el-form-item>

                <el-form-item label="转接组织" prop="transfer">
                    <el-col :span="20">
                        <el-select v-model="form.transfer" placeholder="请选择组织" style="margin-left: 5px;">
                            <el-option
                                    v-for="item in organizationsData"
                                    :key="item.code"
                                    :label="item.name"
                                    :value="item.code">
                            </el-option>
                        </el-select>
                    </el-col>
                </el-form-item>
            </el-form>

            <span slot="footer" class="dialog-footer">
                <el-button @click="centerDialogVisible = false">取 消</el-button>
                <el-button type="primary" @click="save">确 定</el-button>
            </span>
        </el-dialog>

        <!--------审核列表-------->
        <el-dialog
                title="提示"
                :visible.sync="checkDialogVisible"
                width="30%"
                center>

            <el-form ref="form" :rules="rules1" :model="form" label-width="80px">
                <el-form-item label="学号" prop="studentId">
                    <el-col :span="20">
                        <el-input v-model="form1.studentId" readonly></el-input>
                    </el-col>
                </el-form-item>

                <el-form-item label="姓名" prop="name">
                    <el-col :span="20">
                        <el-input v-model="form1.name" readonly></el-input>
                    </el-col>
                </el-form-item>

                <el-form-item label="原组织" prop="original">
                    <el-col :span="20">
                        <el-select v-model="form1.original" disabled style="margin-left: 5px;">
                            <el-option
                                    v-for="item in organizationsData"
                                    :key="item.code"
                                    :label="item.name"
                                    :value="item.code">
                            </el-option>
                        </el-select>
                    </el-col>
                </el-form-item>

                <el-form-item label="转接组织" prop="transfer">
                    <el-col :span="20">
                        <el-select v-model="form1.transfer" disabled style="margin-left: 5px;">
                            <el-option
                                    v-for="item in organizationsData"
                                    :key="item.code"
                                    :label="item.name"
                                    :value="item.code">
                            </el-option>
                        </el-select>
                    </el-col>
                </el-form-item>
            </el-form>

            <span slot="footer" class="dialog-footer">
                <el-button type="success" @click="pass">通过</el-button>
                <el-button type="danger" @click="refuse">拒绝</el-button>
            </span>
        </el-dialog>
    </div>
</template>

<script>
    import SelectUser from "../meb/SelectUser";
    import {serverIp} from "../../../public/config";

    export default {
        name: "MyTransManage",
        components: {SelectUser},
        data() {
            return {
                serverIp:serverIp,
                users: JSON.parse(sessionStorage.getItem('CurUser')),
                originalData: [],
                organizationsData: [],
                usersData: [],
                tableData: [],
                pageSize: 9,
                inDialogVisible: false,
                innerVisible: false,
                checkDialogVisible: false,
                currentRow: {},
                pageNum: 1,
                total: 0,
                name: '',
                tempUser: {},

                centerDialogVisible: false,
                form: {
                    id: '',
                    studentId: '',
                    name: '',
                    original: '',
                    transfer: '',
                    statu: '',
                },
                form1: {
                    id: '',
                    studentId: '',
                    name: '',
                    original: '',
                    transfer: '',
                    statu: '',
                },
                rules: {
                    name: [
                        {required: true, message: '请输入名字', trigger: 'blur'}
                    ],
                },
                rules1: {},

            };
        },
        methods: {
            pass() {
                this.form1.statu = 2;

                this.$axios.post('http://'+ serverIp +':8090/trans/update', this.form1)
                    .then(res => res.data).then(res => {
                    console.log(res);
                    if (res.code == 200) {
                        this.$message({
                            message: '操作成功！',
                            type: 'success'
                        });
                        this.checkDialogVisible = false;
                        this.loadPost();
                        this.resetForm()
                    } else {
                        this.$message({
                            message: '操作失败！',
                            type: 'error'
                        });
                    }
                })
            },
            refuse() {
                this.form1.statu = 3;
                this.$axios.post('http://'+ serverIp +':8090/trans/update', this.form1)
                    .then(res => res.data).then(res => {
                    console.log(res);
                    if (res.code == 200) {
                        this.$message({
                            message: '操作成功！',
                            type: 'success'
                        });
                        this.checkDialogVisible = false;
                        this.loadPost();
                        this.resetForm()
                    } else {
                        this.$message({
                            message: '操作失败！',
                            type: 'error'
                        });
                    }
                })

            },
            selectCurrentChange(val) {
                this.currentRow = val;
            },
            checkUser() {
                if (!this.currentRow.id) {
                    alert('请选择记录');
                    return;
                }
                this.checkDialogVisible = true
                this.$nextTick(() => {
                    this.resetForm()
                });
                this.form1.id = this.currentRow.id;
                this.form1.studentId = this.currentRow.studentId;
                this.form1.name = this.currentRow.name;
                this.form1.original = this.currentRow.original;
                this.form1.transfer = this.currentRow.transfer;
            },
            selectUser() {
                this.innerVisible = true
            },

            confirmUser() {
                this.form.name = this.tempUser.name;
                this.form.studentId = this.tempUser.studentId;

                this.innerVisible = false
            },

            doSelectUser(val) {
                console.log(val);
                this.tempUser = val;
                this.mounted()
            },

            toTrans() {
                this.form.statu = 1
                this.centerDialogVisible = true
                this.$nextTick(() => {
                    this.resetForm()
                });
            },

            formatOriginal(row) {
                let tempOriginal = this.organizationsData.find(item => {
                    return item.code == row.original
                });
                return tempOriginal && tempOriginal.name
            },
            formatOrganizations(row) {
                let temp = this.organizationsData.find(item => {
                    return item.code == row.transfer
                });

                return temp && temp.name
            },

            mounted() {
                // 获取当前用户信息
                const users = JSON.parse(sessionStorage.getItem('CurUser'))
                // 将当前用户的机构名赋值给 form 对象的 organization 属性
                this.form.original = users.organization
            },

            resetForm() {
                this.$refs.form.resetFields();
            },

            del(id) {
                console.log(id);

                this.$axios.get('http://'+ serverIp +':8090/trans/delete?id=' + id)
                    .then(res => res.data).then(res => {
                    console.log(res);
                    if (res.code == 200) {
                        this.$message({
                            message: '操作成功！',
                            type: 'success'
                        });
                        this.centerDialogVisible = false;
                        this.loadPost();
                    } else {
                        this.$message({
                            message: '操作失败！',
                            type: 'error'
                        });
                    }
                })
            },

            mod(row) {
                console.log(row);

                this.checkDialogVisible = true
                this.$nextTick(() => {
                    //赋值到表单
                    this.form1.id = row.id;
                    this.form1.studentId = row.studentId;
                    this.form1.name = row.name;
                    this.form1.original = row.organization;
                    this.form1.transfer = row.transfer;
                })
            },

            doMod() {
                this.$axios.post('http://'+ serverIp +':8090/trans/update', this.form)
                    .then(res => res.data).then(res => {
                    console.log(res);
                    if (res.code == 200) {
                        this.$message({
                            message: '操作成功！',
                            type: 'success'
                        });
                        this.centerDialogVisible = false;
                        this.loadPost();
                        this.resetForm()
                    } else {
                        this.$message({
                            message: '操作失败！',
                            type: 'error'
                        });
                    }
                })
            },

            doSave() {
                this.$axios.post('http://'+ serverIp +':8090/trans/save', this.form)
                    .then(res => res.data).then(res => {
                    console.log(res);
                    if (res.code == 200) {
                        this.$message({
                            message: '操作成功！',
                            type: 'success'
                        });
                        this.centerDialogVisible = false;
                        this.loadPost();
                        this.resetForm()
                    } else {
                        this.$message({
                            message: '操作失败！',
                            type: 'error'
                        });
                    }
                })
            },

            save() {
                this.$refs.form.validate((valid) => {
                        if (valid) {
                            if (this.form.id) {
                                this.doMod();
                            } else {
                                this.doSave();
                            }
                        } else {
                            console.log('error!!!');
                            return false;
                        }
                    }
                )
            },

            add() {
                this.centerDialogVisible = true;
                this.$nextTick(() => {
                    this.resetForm();
                    this.mounted()
                })
            },

            resetParam() {
                this.name = '';
                this.loadPost()
            },

            handleSizeChange(val) {
                console.log(`每页 ${val} 条`);
                this.pageNum = 1;
                this.pageSize = val;
                this.loadPost()
            },
            handleCurrentChange(val) {
                console.log(`当前页: ${val}`);
                this.pageNum = val;
                this.loadPost()
            },

            loadPost() {
                const users = JSON.parse(sessionStorage.getItem('CurUser'));
                this.$axios.post('http://'+ serverIp +':8090/trans/myPage', {
                    pageSize: this.pageSize,
                    pageNum: this.pageNum,

                    param: {
                        name: this.name,
                        studentId: this.users.studentId,
                    }
                }).then(res => res.data).then(res => {
                    console.log(res);
                    if (res.code == 200) {
                        this.tableData = res.data
                        this.total = res.total
                    } else {
                        alert('获取数据失败')
                    }

                })
            },
            loadOrganizations() {
                this.$axios.get('http://'+ serverIp +':8090/organizations/list').then(res => res.data).then(res => {
                    console.log(res)
                    if (res.code == 200) {
                        this.organizationsData = res.data
                    } else {
                        alert('获取数据失败')
                    }

                })
            },
        },

        beforeMount() {
            this.loadPost();
            this.loadOrganizations();

        }
    }
</script>

<style scoped>

    .search {
        margin-bottom: 5px;
    }
</style>